src/app/groups/[groupId]/expenses/expense-list.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

'use client'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { getGroupExpenses } from '@/lib/api'
import { cn } from '@/lib/utils'
import { Participant } from '@prisma/client'
import { ChevronRight } from 'lucide-react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'

type Props = {
  expenses: Awaited<ReturnType<typeof getGroupExpenses>>
  participants: Participant[]
  currency: string
  groupId: string
}

export function ExpenseList({
  expenses,
  currency,
  participants,
  groupId,
}: Props) {
  const getParticipant = (id: string) => participants.find((p) => p.id === id)
  const router = useRouter()

  return expenses.length > 0 ? (
    expenses.map((expense) => (
      <div
        key={expense.id}
        className={cn(
          'border-t flex justify-between pl-6 pr-2 py-4 text-sm cursor-pointer hover:bg-slate-50',
          expense.isReimbursement && 'italic',
        )}
        onClick={() => {
          router.push(`/groups/${groupId}/expenses/${expense.id}/edit`)
        }}
      >
        <div>
          <div className="mb-1">{expense.title}</div>
          <div className="text-xs text-muted-foreground">
            Paid by{' '}
            <Badge variant="secondary">
              {getParticipant(expense.paidById)?.name}
            </Badge>{' '}
            for{' '}
            {expense.paidFor.map((paidFor, index) => (
              <Badge variant="secondary" key={index} className="mr-1 mb-1">
                {participants.find((p) => p.id === paidFor.participantId)?.name}
              </Badge>
            ))}
          </div>
        </div>
        <div className="flex items-center">
          <div className="tabular-nums whitespace-nowrap font-bold">
            {currency} {(expense.amount / 100).toFixed(2)}
          </div>
          <Button size="icon" variant="link" className="-my-2" asChild>
            <Link href={`/groups/${groupId}/expenses/${expense.id}/edit`}>
              <ChevronRight className="w-4 h-4" />
            </Link>
          </Button>
        </div>
      </div>
    ))
  ) : (
    <p className="px-6 text-sm py-6">
      Your group doesn’t contain any expense yet.{' '}
      <Button variant="link" asChild className="-m-4">
        <Link href={`/groups/${groupId}/expenses/create`}>
          Create the first one
        </Link>
      </Button>
    </p>
  )
}